import React from 'react'
import './index.scss'
import { Menu, Button } from 'antd'
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
} from '@ant-design/icons'
import {useHistory, useLocation} from "react-router-dom/cjs/react-router-dom";

const { SubMenu } = Menu
const MENU_SMALL = 82
const MENU_LAGER = 200

function SideMenu(props) {
  const history = useHistory()
  const location = useLocation()

  const toggleCollapsed = () => {
    props.handleShow(!props.isShow)
  };
  return(
    <div style={{ width: props.isShow ? MENU_LAGER : MENU_SMALL }} className="side">
      <Button type="primary" onClick={toggleCollapsed}>
        {React.createElement(props.isShow ? MenuUnfoldOutlined : MenuFoldOutlined)}
      </Button>
      <Menu
        selectedKeys={location.pathname}
        // defaultSelectedKeys={location.pathname}
        defaultSelectedKeys={'/main/personal/setting'}
        mode="inline"
        theme="light"
        inlineCollapsed={!props.isShow}
      >
        <Menu.Item key="/main" icon={<PieChartOutlined />} onClick={()=>history.push('/main')}>
          我加入
        </Menu.Item>
        <Menu.Item key="/main/manage" icon={<DesktopOutlined />} onClick={()=>history.push('/main/manage')}>
          我管理
        </Menu.Item>

        <SubMenu key="/main/personal" icon={<AppstoreOutlined />} title="个人页">
          <Menu.Item key="/main/personal/center" onClick={()=>history.push('/main/personal/center')}>个人中心</Menu.Item>
          <Menu.Item key="/main/personal/setting" onClick={()=>history.push('/main/personal/setting')}>个人设置</Menu.Item>
        </SubMenu>

      </Menu>
    </div>
  )
}

export default SideMenu